<template>
  <div id="app">
    <!-- 头部 -->
    <div class="head">
      <div class="city">
        <span @click="$router.push('/city')">{{$store.state.city.name}}
          <i></i>
        </span>
      </div>
      <div class="search">
        <i class="iconfont icon-fangdajing"></i>
        <input type="text" value="目的地/酒店/景点/关键字" @click="$router.push('/search')">
        
      </div>
      <div class="iconfont icon-wode"></div>
    </div>

    <!-- banner -->
    <div class="banner">
      <img src="../assets/img/banner.jpg" alt="">
    </div>

    <!-- nav -->
    <Nav></Nav>
  </div>
</template>

<script>
import Nav from './Nav'

export default{
    components:{
        Nav
       
    }
}
</script>

<style lang="scss" scoped>
  .head{
    width: 100%;
    height: 51px;
    // background: red;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .city{
      display: flex;
      justify-content: center;
      font-size: 16px;
      color: #00c777;
      i{
       display: inline-block;
      width: 12px;
      height: 7px;
      background: url(../assets/img/jiao.png) no-repeat;
      background-size: contain;
      }
    }
    .search{
      width: 261px;
      height: 33px;
      position: relative;
      
      input{
        width: 100%;
        height: 100%;
        outline: none;
        border: none;
        border-radius: 16px 16px 16px 16px ;
        background: #eaedf1;
        text-align: center;
        line-height: 33px;
        font-size: 14px;
        color: #93989f;
        font-weight: 800;
      }
      i{
        width: 13px;
        height: 13px;
        position: absolute;
        left: 35px;
        top: 10px;
        color: #93989f;
        font-weight: 800;
      }
        
    }
    .icon-wode{
      font-size: 20px;
      color: #00c777;
      font-weight: 600;
    }  
  }
  
  .banner{
    width: 100%;
    height: 95px;
    img{
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  
</style>